<template>
  <section>
    <div class="custorm--modelbox graphicswiper-edit">
      <!-- <upload-model
        ref="upload"
        :saveChangeEvt="uploadSaveChange"
        :uploadType="uploadConfig.type"
        :config="uploadConfig"
      ></upload-model> -->
      <!-- <choose-path
        ref="choosepath"
        :changeEvt="chooseUrl"
        :tabType="tabType"
      ></choose-path> -->
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
      <section>
        <!-- <div class="edit-form-item">
          <div class="form-label mb-20">边角样式</div>
          <div class="flex-row flex-align-c">
            <div class="txbox flex-row flex-justify-c flex-align-c" style="margin-left:0;" @click="changeStyle(1,'borderstyle')" v-bind:class="{active:custormItemData.style.borderstyle==1}">
              <div class="yuan"></div>
            </div>
            <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeStyle(2,'borderstyle')" v-bind:class="{active:custormItemData.style.borderstyle==2}">
              <div class="yzt"></div>
            </div>
            <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeStyle(3,'borderstyle')" v-bind:class="{active:custormItemData.style.borderstyle==3}">
              <div class="cft"></div>
            </div>
            <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeStyle(4,'borderstyle')" v-bind:class="{active:custormItemData.style.borderstyle==4}">
              <div class="yzt">1/5</div>
            </div>
          </div>
        </div> -->

        <div class="edit-form-item marginbtn">
          <div class="form-label mb-20">边角样式</div>
          <el-radio-group
            v-model="custormItemData.style.borderstyle"
            class="flex-row mar-15"
          >
            <el-radio label="1">圆</el-radio>
            <el-radio label="2">椭圆</el-radio>
            <el-radio label="3">直角</el-radio>
            <el-radio label="4">椭圆+下标</el-radio>
          </el-radio-group>
        </div>

        <!-- <div class="es-form-item">
          <div class="form-label mb-20">轮播图位置</div>
          <div class="flex-row flex-align-c">
            <div class="txbox flex-row flex-justify-c flex-align-c" style="margin-left:0;" @click="changeStyle(1,'align')" v-bind:class="{active:custormItemData.style.align==1}">
              <img :src="getPath('left.png')" alt="">
            </div>
            <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeStyle(2,'align')" v-bind:class="{active:custormItemData.style.align==2}">
              <img :src="getPath('center.png')" alt="">
            </div>
            <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeStyle(3,'align')" v-bind:class="{active:custormItemData.style.align==3}">
              <img :src="getPath('right.png')" alt="">
            </div>
          </div>
        </div> -->

        <div class="edit-form-item">
          <div class="form-label mb-20">按钮形状</div>
          <el-radio-group
            v-model="custormItemData.style.align"
            class="flex-row mar-15"
          >
            <el-radio label="1">居左</el-radio>
            <el-radio label="2">居中</el-radio>
            <el-radio label="3">居右</el-radio>
          </el-radio-group>
        </div>

        <div class="es-form-item">
          <div class="form-label mb-20">轮播图片</div>
          <div class="ivu-alert"> <span>建议图片宽度750，高度200-950，支持jpg、png。要求一组内图片高度必须完全一致</span></div>
          <div v-for="(item, index) in custormItemData.data" :key="index">
            <div class="item" draggable="false">
              <i class="el-icon-circle-close   delete-child" @click="delItemList({data:custormItemData.data,index})"></i>
              <div class="item-inner "><span class="labeltext">图片</span>
                <div typetext="图片" show="0" class="small" style="align-self: start;">
                  <div class="uploadSource solid"><i class="delete ivu-icon iconfont icon-input_clear" style="font-size: 16px;"></i>
                    <div class="img" @click="uploadtoggle(index,'image')" :style="{'background-image':`url(${getPath(item.thumb.file_path)})`,'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                  </div>
                </div>
              </div>
              <div class="item-inner ">
                <span class="labeltext">链接</span>
                <div class="readonly-div" @click="uploadtoggle(index,'link')">
                  <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                    <input autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" class="ivu-input ivu-input-default" :value="typeof item.link === 'string' ? item.link : item.link.path">
                  </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="goodscol-add" @click="addItemList({data:custormItemData.data,max:8,itemCopy:{link: '',thumb: {file_path: 'default_btn1.png'}}})"><i class="el-icon-plus"></i> 添加 {{custormItemData.data.length}}/8</div>
        </div>
      </section>
    </div>
  </section>
</template>

<script>
// import choosePath from "../../components/choosePath"
// import uploadModel from "../../components/upload"
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      styletype: '1',
      bordertype: '1',
      imgCurrent: -1
    }
  },
  components: {

  },
  methods: {
    uploadFileCallBack(files) {
      console.log('oooooooooooooooo', files)
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.data[this.imgCurrent]['link'] = file_path
        } else {
          if (custorm) {
            this.custormItemData.data[this.imgCurrent]['link'] = custorm
          } else {
            this.$message.error('请选择链接~!')
          }
        }
      } else {
        const { displayData: [file_path] } = files
        if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.data[this.imgCurrent]['thumb'] = file_path
        }
      }
    },
    uploadtoggle(index, type) {
      var data = this.custormItemData.data[index]['link']
      console.log('ssssssssssss', data)
      this.output({ type, params: { editKey: this.custormItemData.key }, data })
      this.imgCurrent = index
    },
    changeStyle(e, type) {
      this.$nextTick(() => {
        this[type === 'borderstyle' ? 'bordertype' : 'styletype'] = e
        this.custormItemData['style'][type] = e
      })
    }
    // addItemList(index) {
    //   const lisyArr = this.custormItemData.data
    //   if (lisyArr.length < 8) {
    //     this.$nextTick(() => {
    //       this.custormItemData.data.push({
    //         link: '',
    //         thumb: {
    //           file_path: 'default_btn1.png'
    //         }
    //       })
    //     })
    //   } else {
    //     this.$message({
    //       type: 'error',
    //       message: `添加失败，此组件最多添加8个轮播图~!`
    //     })
    //   }
    // },
    // delItemList(index) {
    //   const lisyArr = this.custormItemData.data
    //   if (lisyArr.length <= 1) {
    //     this.$message({
    //       type: 'error',
    //       message: `删除失败，此组件至少保留1个`
    //     })
    //   } else {
    //     this.$alert('确定删除此选项？', '提示', {
    //       confirmButtonText: '确定',
    //       callback: action => {
    //         if (action === 'confirm') {
    //           lisyArr.splice(index, 1)
    //           this.$message({
    //             type: 'success',
    //             message: `删除成功`
    //           })
    //         }
    //       }
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicswiper-edit {
  //列表开始
  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;

    .uploadSource {
      background: #fff;
      cursor: pointer;
    }

    .uploadSource {
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin-right: 0;
      border: 1px dashed #ededed;
      text-align: center;
      color: #dad9d9;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      float: left;
      position: relative;
    }
  }

  .es-form-item:last-child {
    border-bottom: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .es-form-item .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .es-form-item .button-img.active {
    border-color: #fb6638 !important;
  }

  .es-form-item [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .es-form-item .opacity-0 {
    opacity: 0;
  }

  .es-form-item .button-img .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .alignC {
    text-align: center;
  }

  .es-form-item .item {
    background: #f6f7f9;
    padding: 10px 20px 10px 10px;
    border: 1px solid #eee;
    color: #999;
    position: relative;
    margin-bottom: 20px;
  }

  .es-form-item .labeltext {
    width: 40px;
    text-align: right;
    padding-right: 8px;
    color: #666;
  }

  .es-form-item .item-inner .readonly-div {
    position: relative;
    flex-grow: 1;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .ivu-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #ededed;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
  }

  .es-form-item .item-inner .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .es-form-item .item-inner .readonly-div .readonly-icon {
    position: absolute;
    top: 5px;
    left: 12px;
  }

  .es-form-item .item .delete-child {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    font-size: 14px;
  }

  //列表结束

  .txbox {
    border-radius: 3px;
    border: 1px solid transparent;
    margin: 0 15px 0 13px;
    height: 32px;
    width: 32px;
    cursor: pointer;
  }

  .txbox img {
    max-width: 17px;
    max-height: 17px;
  }

  .txbox.active {
    border-color: #409eff;
  }

  .yzt {
    background: #dcdcdc;
    height: 15px;
    width: 26px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
  }

  .cft {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
  }
   .marginbtn{
    /deep/.el-radio {
        margin-right: 0;
    }
  }
  .yuan {
    background: #dcdcdc;
    height: 15px;
    width: 15px;
    border-radius: 15px;
  }
}
</style>
